<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml" xmlns:th="http://www.thymeleaf.org">

<head>
    <meta charset="UTF-8">
    <link rel="stylesheet" href="/css/index.css"/>
    <link rel="stylesheet" href="/layui/css/layui.css">
    <link rel="stylesheet" href="/layui/myicon/iconfont.css" type="text/css">
    <title>密码找回</title>
</head>
<body style="background: #fff url(/images/bg.jpg) repeat top left;">
<div id="container_demo" >
    <a class="hiddenanchor" id="toregister"></a>
    <a class="hiddenanchor" id="tologin"></a>
    <a class="hiddenanchor" id="toPhone"></a>
    <div id="wrapper">







        <div id="phones" class="animate form">
            <h1>密码找回</h1>
            <form class="layui-form layui-form-pane"  id="phoneLogin">
                <div>
                    <label >邮箱：</label>
                    <div>
                        <input id="email" type="text" name="email"  required="required" placeholder="请输入邮箱" oninvalid="setCustomValidity('请输入邮箱！');" oninput="setCustomValidity('');"/>
                        <i class="iconfont icon-email" style="position: fixed;margin-top: -28px;margin-left:8px;font-size: 16px"/></i>

                    </div>
                </div>
                <div>
                    <label data-icon="p">新密码：</label>
                    <div>
                        <input id="newPpassword" type="text" name="code"  required="required" placeholder="请输入新密码" oninvalid="setCustomValidity('请输入密码！');" oninput="setCustomValidity('');"/>
                    </div>
                </div>
                <p>
                    <label for="kaptcha" class="youpasswd" >图形验证码</label>
                    <input id="kaptcha" name="kaptcha" required="required" type="text" placeholder="请输入图形验证码" oninvalid="setCustomValidity('请填写图形验证码！');" oninput="setCustomValidity('');" >
                    <i class="iconfont icon-yanzhengma" style="position: fixed;margin-top: 14px;margin-left:-394px;font-size: 16px"/></i>

                    <label><img alt="单击图片刷新！" class="pointer" th:src="@{/common/mall/kaptcha}"
                                onclick="this.src='/common/mall/kaptcha?d='+new Date()*1"  id="retcode" ></label>


                </p>

                <div>
                    <label >验证码：</label>
                    <div>
                        <input id="kaptchas" type="text" name="code"  required="required" placeholder="验证码"/>
                        <i class="iconfont icon-yanzhengma" style="position: fixed;margin-top: 14px;margin-left:-394px;font-size: 16px"/></i>
                    </div>
                    <button id="retCheckCode" type="button" class="layui-btn">获取验证码</button>
                </div>
                <p class="login button">
                    <input type="submit" value="登录"   style="margin-top: 20px" />
                </p>
                <p class="change_link">
                    <a href="#"  onClick="javascript :history.back(-1);"> 返回登陆 </a>
                </p>
            </form>

        </div>



    </div>

</div>
<script  src="js/jquery-3.4.1.js" th:src="@{/js/jquery-3.4.1.js}"></script>
<script src="/layui/layui.js" ></script>

<script>
    layui.use(['form','layer'],function (){
        var form = layui.form;
        var layer = layui.layer;
        var $ = layui.$;

        //验证码点击
        $("#retCheckCode").click(function () {
            var email = $("#email").val();
            if (email == null || email == "") {
                layer.msg("请输入账号的注册邮箱！！！");
                return;
            }
            var reg=new RegExp("[1-9]\\d{7,10}@qq\\.com");
            if(!(reg.test(email))){
                layer.msg("邮箱格式有误，请重新输入");
                return false;
            }else {
                layer.msg('验证码已发送');
            }

            countDown();

        })

        //注册页倒计时60秒
        var maxTime = 60;
        function countDown(){
            if (maxTime == 0){
                Codes = "";
                $("#retCheckCode").removeClass("layui-btn-disabled");
                $("#retCheckCode").removeAttr("disabled")
                $("#retCheckCode").html("获取验证码");
                maxTime = 60;
            }else{
                $("#retCheckCode").attr("disabled","disabled");
                $("#retCheckCode").addClass("layui-btn-disabled");
                form.render();
                $("#retCheckCode").html(maxTime+"秒后重新获取");
                $("#retCheckCode").css("font-size","10px");
                maxTime--;
                setTimeout(countDown,1000);
            }
        }

            return false;
    })



</script>


</body>
</html>